@import "common";
html,body {
    width: 100%;
    height: 100%;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88/100rem;
    padding: 0 20/100rem;
    box-sizing: border-box;
    .header-center {
        float: left;
        width: 100%;
        height: 100%;
        background: skyblue;
        .header-center-box {
            height: 72/100rem;
            margin: 0 (56+32+32)/100rem;
            margin-top: 8/100rem;
            border-radius: 36/100rem;
            background-color: #f7f7f7;
            position: relative;
            overflow: hidden;
            img {
                .vCenter();
                width: 42/100rem;
                left: 92/100rem;
            }
            input {
                width: 100%;
                height: 100%;
                padding-left: (92+42+5)/100rem;
                box-sizing: border-box;
                border: none;
                outline: none;
                font-size: 30/100rem;
                color: #c9c9c9;
            }
            .header-title {
                display: none;
            }
            .header-switch {
                display: none;
            }
        }
    }
    .header-left {
        float: left;
        width: 56/100rem;
        height: 56/100rem;
        margin-top: 16/100rem;
        margin-left: -100%;
        background: url('./../images/topbar-it666-discern.png') no-repeat;
        background-size: 100%;
    }
    .header-cancel {
        display: none;
    }
    .header-right {
        float: left;
        width: 56/100rem;
        height: 56/100rem;
        margin-top: 16/100rem;
        margin-left: -56/100rem;
        background: url('./../images/topbar-it666-play.png') no-repeat;
        background-size: 100%;
    }
    &.active {
        .header-left {
            display: none;
        }
        .header-center {
            .header-center-box {
                margin-left: 0;
                margin-right: 2*120/100rem;
            }
        }
        .header-cancel {
            display: inline-block;
            float: left;
            margin-left: -200/100rem;
            line-height: 88/100rem;
            a {
                font-size: 32/100rem;
                font-weight: bold;
                color: #333;
            }
            
        }
        .header-right {
            background-image: url('./../images/topbar-it666-category.png');
        }
    }
    &.video {
        .header-left {
            background-image: url('./../images/topbar-it666-video.png');
        }
    }
    &.me {
        .header-left {
            background-image: url('./../images/topbar-it666-cloud.png');
        }
        .header-center {
            .header-center-box {
                background: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
                .header-title {
                    .center();
                    display: block;
                    line-height: 72/100rem;
                    color: #333;
                    font-size: 34/100rem;
                }
            }
        }
    }
    &.friend {
        .header-left {
            background-image: url('./../images/topbar-it666-add.png');
        }
        .header-center {
            .header-center-box {
                background-color: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
                .header-switch {
                    position: relative;
                    display: flex;
                    width: 280/100rem;
                    height: 58/100rem;
                    margin: 0 auto;
                    margin-top: 7/100rem;
                    border: 1px solid #ffcbc8;
                    border-radius: 29/100rem;
                    overflow: hidden;
                    i {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 140/100rem;
                        height: 100%;
                        border-radius: 29/100rem;
                        background: #fd271b;
                    }
                    span {
                        position: inline-block;
                        display: block;
                        width: 140/100rem;
                        height: 100%;
                        line-height: 58/100rem;
                        font-size: 34/100rem;
                        font-weight: bold;
                        text-align: center;
                        color: #fd271b;
                        z-index: 1;
                        &.active {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    &.account {
        .header-left {
            background-image: url('./../images/topbar-it666-scan.png');
        }
        .header-center {
            .header-center-box {
                background-color: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
            }
        }
    }
}

.main{
    width: 100%;
    height: 100%;
    .main-in{
      width: 100%;
      height: 4660/100rem;
      padding: 0 30/100rem;
      box-sizing: border-box;
      .pull-down{
        width: 100%;
        height: 88/100rem;
        position: relative;
        img{
          .center();
        }
        svg{
          .center();
        }
      }
      .pull-up{
        width: 100%;
        height: 98/100rem;
        p{
          text-align: center;
          padding-top: 29/100rem;
          box-sizing: border-box;
          font-size: 24/100rem;
        }
      }
      .swiper-container{
        width: 690/100rem;
        height: 266/100rem;
        margin-top: 30/100rem;
        border-radius: 10/100rem;
        .swiper-wrapper{
          .swiper-slide{
            span{
              padding: 5/100rem 10/100rem;
              font-size: 22/100rem;
              color: #fff;
              background: deepskyblue;
              position: absolute;
              right: 0;
              bottom: 0;
              border-top-left-radius: 15/100rem;
            }
          }
        }
        .swiper-pagination{
          .my-bullet{
            display: inline-block;
            width: 14/100rem;
            height: 14/100rem;
            margin: 0 6/100rem;
            background: #ccc;
            border-radius: 50%;
          }
          .my-bullet-active{
            background: #fd271b;
          }
        }
      }
      .nav{
        width: 100%;
        padding: 44/100rem 0;
        ul{
          list-style: none;
          display: flex;
          li{
            margin-right: 50/100rem;
            text-align: center;
            &:last-child{
              margin-right: 0;
            }
            img{
              width: 98/100rem;
              background: #fd271b;
              border-radius: 50%;
              display: block;
              overflow: hidden;
              margin-bottom: 20/100rem;
            }
            span{
              font-size: 22/100rem;
            }
            p{
              position: relative;
              i{
                .center();
                font-size: 22/100rem;
                color: #fd271b;
              }
            }
          }
        }
      }
      .category{
        width: 100%;
        border-top: 1px solid #ccc;
        .category-top{
          width: 100%;
          height: 120/100rem;
          display: flex;
          justify-content: space-between;
          h3{
            font-size: 34/100rem;
            font-weight: bold;
            color: #333;
            line-height: 120/100rem;
          }
          span{
            font-size: 26/100rem;
            padding: 10/100rem 20/100rem;
            border: 1px solid #ccc;
            height: 66/100rem;
            line-height: 46/100rem;
            text-align: center;
            box-sizing: border-box;
            border-radius: 33/100rem;
            margin-top: 27/100rem;
          }
        }
        .category-bottom{
          width: 100%;
          ul{
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
              margin-bottom: 40/100rem;
              width: 216/100rem;
              div{
                width: 100%;
                border-radius: 15/100rem;
                overflow: hidden;
                position: relative;
                .p1{
                  position: absolute;
                  top: 10/100rem;
                  right: 10/100rem;
                  img{
                    vertical-align: top;
                    position: relative;
                    top: 5/100rem;
                    width: 26/100rem;
                  }
                  span{
                    font-size: 26/100rem;
                    color: #fff;
                  }
                }
                .p2{
                  position: absolute;
                  top: 10/100rem;
                  left: 10/100rem;
                  img{
                    width: 50/100rem;
                    background: rgba(0,0,0,0.5);
                    border-radius: 50%;
                    border: 1px solid #fff;
                  }
                }
                .p3{
                  position: absolute;
                  right: 10/100rem;
                  bottom: 10/100rem;
                  img{
                    width: 50/100rem;
                  }
                }
              }
              .category-title{
                width: 100%;
                margin-top: 15/100rem;
                font-size: 26/100rem;
                color: #333;
              }
              .category-singer{
                width: 100%;
                font-size: 26/100rem;
                color: #ccc;
              }
            }
          }
        }
      }
    }
}

.footer{
    width: 100%;
    height: 98/100rem;
    background: pink;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    ul{
      list-style: none;
      width: 100%;
      height: 100%;
      display: flex;
      text-align: center;
      li{
        margin: 0 46/100rem;
        cursor: pointer;
        img{
          display: block;
          width: 56/100rem;
          height: 56/100rem;
          margin-top: 10/100rem;
        }
        span{
            font-size: 18/100rem;
        }
        &.active{
          color: #fd271b;
          img{
            background: #fd271b;
            border-radius: 50%;
          }
        }
      }
    }
}